<template>
  <div class="music">
    <div class="player">
      <audio :src="musicurl" loop id="audio"></audio>
      <div class="player_a">
        <span href="javascript:;" class="iconfont icon-shangyiqu"></span>
        <span
          href="javascript:;"
          class="iconfont"
          @click="switchplay('audio')"
          :class="{ 'icon-bofang': !isplay, 'icon-bofangzhong': isplay }"></span>
        <span href="javascript:;" class="iconfont icon-xiayiqu"></span>
      </div>
      <div class="player_b">
        <router-link :to="`/songinfo/${musicId}`">
        <img :src="musicinfo.al.picUrl" />
        </router-link>
      </div>
      <div class="player_c">
        <div class="player_c_top">
          <span><router-link :to="`/songinfo/${musicId}`" style="color:#fff">{{ musicinfo.name }}</router-link></span>
          <span class="iconfont icon-shipin"></span>
          <span><span v-for="(v,i) in musicinfo.ar" :key="i"><span v-if="i>0">/</span><router-link to="#">{{ v.name }}</router-link></span></span>
        </div>
        <div class="player_c_bottom">
          <div class="bottom_left">
            <div class="cc">
              <span class="ccc"></span>
            </div>
          </div>
          <div class="bottom_right">
            <span>{{ changetime(overtime) }}</span>/<span>{{ changetime(musicinfo.dt) }}</span>
          </div>
        </div>
      </div>
      <div class="player_d">
        <div class="sound">
          <a
            href="javascript:;"
            class="iconfont"
            @click="switchsound('audio')"
            :class="{ 'icon-jinyin': !issound, 'icon-shengyin': issound }"
          ></a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["musicId"]),
  },
  data() {
    return {
      musicurl: "",
      issound: true,
      isplay: false,
      musicinfo: { name: "", dt: "", al: { picUrl: "" }, ar: [{ name: "" }] },
      overtime: "",
    };
  },
  watch: {
    musicId() {
      this.getmusicurl();
      this.getmusicinfo();
      this.isplay = true;
      document.getElementById("audio").autoplay = "autoplay";
    },
    isplay() {
      let timer = setInterval(this.timer, 1000);
      if (this.isplay) {
        timer;
      } else {
        clearInterval(timer);
      }
    },
  },
  methods: {
    // 转换
    changetime(e) {
      let m =
        Math.floor(e / 1000 / 60) > 9
          ? Math.floor(e / 1000 / 60)
          : "0" + Math.floor(e / 1000 / 60);
      let s =
        Math.floor(e / 1000 - m * 60) > 9
          ? Math.floor(e / 1000 - m * 60)
          : "0" + Math.floor(e / 1000 - m * 60);
      return m + ":" + s;
    },
    //获取音乐连接
    getmusicurl() {
      axios
        .get(`http://127.0.0.1:3000/song/url?id=${this.musicId}`)
        .then((res) => {
          this.musicurl = res.data.data[0].url;
        });
    },
    // 获取音乐信息
    getmusicinfo() {
      axios
        .get(`http://127.0.0.1:3000/song/detail?ids=${this.musicId}`)
        .then((res) => {
          this.musicinfo = res.data.songs[0];
        });
    },
    // 是否静音
    switchsound(id) {
      this.issound = !this.issound;
      if (this.issound) {
        document.getElementById(id).muted = false;
      } else {
        document.getElementById(id).muted = true;
      }
    },
    // 播放暂停
    switchplay(id) {
      this.isplay = !this.isplay;
      if (this.isplay) {
        document.getElementById(id).play();
      } else {
        document.getElementById(id).pause();
      }
    },
    // 进度条
    timer() {
      this.overtime = document.getElementById("audio").currentTime * 1000 + 1000;

      document.querySelector(".cc").style.width = (this.overtime / this.musicinfo.dt) * 100 + "%";
    },
  },
  created() {
    this.getmusicinfo();
    this.getmusicurl();
  },
};
</script>
<style scoped>
.music {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  background-color: #2c2c2c;
}
.player {
  width: 980px;
  height: 50px;
  margin: 0 auto;
  display: flex;
}
.player .player_a {
  height: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.player .player_a span {
  font-size: 33px;
  color: #c0c0c0;
  font-weight: 400;
}
.player .player_a span:nth-child(2) {
  font-size: 45px;
  color: #ffffff;
}
.player .player_b {
  height: 50px;
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.player .player_b img {
  width: 35px;
  height: 35px;
  border: 1px solid #000;
  border-radius: 3px;
}
.player .player_c {
  margin-left: 10px;
}
.player .player_c .player_c_top {
  font-size: 12px;
  margin-top: 5px;
}
.player .player_c .player_c_top span:nth-child(2) {
  margin-left: 5px;
  color: #9b9b9b;
}
.player .player_c .player_c_top span:nth-child(3) {
  margin-left: 15px;
  color: #9b9b9b;
}
.player .player_c .player_c_top a {
  font-size: 12px;
  color: #9b9b9b;
}
.player .player_c .player_c_bottom {
  display: flex;
  margin-top: 8px;
}
.player .player_c .player_c_bottom .bottom_left {
  width: 500px;
  height: 10px;
  background-color: #535353;
  border-radius: 5px;
}
.player .player_c .player_c_bottom .bottom_left .cc {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 0%;
  height: 10px;
  background-color: #c70c0c;
  border-radius: 5px 0 0 5px;
}
.player .player_c .player_c_bottom .bottom_left .cc .ccc {
  display: block;
  width: 15px;
  height: 15px;
  background-color: #c70c0c;
  border: 4px solid #fff;
  border-radius: 20px;
  margin-right: -15px;
  cursor: pointer;
}
.player .player_c .player_c_bottom .bottom_right {
  font-size: 12px;
  margin-left: 10px;
  color: #797979;
}
.player_d {
  display: flex;
  align-items: center;
}
.player_d .sound a {
  margin-left: 20px;
  color: #939393;
}
</style>